<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{layout/storelayout}" >
<head>
    <title>会员管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
</head>
<body>
<!-- 会员注册页面  -->
<!-- 会员注册页面  -->
<!-- 会员注册页面  -->
<div class="login-main">
    <div layout:fragment="content">

        <!-- 表单选项  -->
        <form id="formSubmit" th:action="@{/memberInFo/addMember}" class="layui-form">

<!--            通过session来获取登陆的商店id-->
            <input type="text" name="storeId" th:value="${session.storeManage.id}" hidden/>

            <!-- 手机号 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">手机号：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="iphone" name="iphone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- 用户名 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">用户名：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="user" name="name" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- 密码 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">输入密码：</label>
                    <div class="layui-input-inline">
                        <input type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- 确认密码 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">确定密码：</label>
                    <div class="layui-input-inline">
                        <input type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- 会员生日 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">会员生日：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthday" required  lay-verify="required" id="date1" autocomplete="off" class="layui-input" >
                    </div>
                </div>
            </div>

            <!-- 充值金额 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">充值金额：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="balance" id="balance" required  lay-verify="required" autocomplete="off" class="layui-input" >
                    </div>
                </div>
            </div>

            <!-- 卡等级 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">卡等级：</label>
                    <div class="layui-input-inline">
                        <select name="type">
                            <option value="1">铜卡</option>
                            <option value="2">金卡</option>
                            <option value="3">钻卡</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 状态 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-bg-white">卡状态：</label>
                    <div class="layui-input-inline">
                        <select name="state">
                            <option value="使用中">使用中</option>
                            <option value="挂失">挂失</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-input-inline login-btn" style="width: 85%">
                <input type="submit" id="submit" lay-submit lay-filter="sub" class="layui-btn layui-btn-primary" value="注册"/>
            </div>
        </form>

        <script src="/layui/layui.js"></script>
        <script type="text/javascript">
            layui.use(['form','jquery','layer','laydate'], function () {
                var form   = layui.form ;
                var laydate = layui.laydate;
                var $      = layui.jquery;
                var layer  = layui.layer;

                //日期
                laydate.render({
                    elem: '#date'
                });
                laydate.render({
                    elem: '#date1'
                });
                laydate.render({
                    elem: '#date2'
                });

                var iphone = false;
                var userName = false;
                var pwd = false;
                var rpwd = false;

                // 为手机号添加正则验证
                $('#iphone').blur(function() {
                    var iph = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                    if(!($('#iphone').val().match(iph))){
                        //layer.msg('请输入合法密码');
                        layer.tips('请输入11位合法手机号', '#iphone',{
                            tipsMore: true
                        });
                        iphone = false;

                    } else if (($('#iphone').val().match(iph))){
                        iphone = true;
                    }

                });

                //添加表单失焦事件
                //验证表单
                $('#user').blur(function() {
                    var user = $(this).val();

                    //alert(user);
                    $.ajax({
                        url:'/memberInFo/selectMemberName',
                        type:'GET',
                        dataType:'json',
                        data:{user:user},
                        //验证用户名是否可用
                        success:function(data){

                            if (data.uname == "可以使用此用户名") {

                                layer.tips('可以使用此用户名！', '#user',{
                                    tipsMore: true
                                });
                                userName = true;

                            } else if(data.uname == "用户名已存在") {
                                layer.tips('当前用户名被占用！', '#user',{
                                    tipsMore: true
                                });
                                userName = false;
                            }
                        }
                    })

                });

                // you code ...
                // 为密码添加正则验证
                $('#pwd').blur(function() {
                    var reg = /^[\w]{6,12}$/;
                    if(!($('#pwd').val().match(reg))){
                        //layer.msg('请输入合法密码');
                        layer.tips('请输入合法密码！', '#pwd',{
                            tipsMore: true
                        });
                        pwd = false;
                    } else if(($('#pwd').val().match(reg))){
                        pwd = true;
                    }

                });

                //验证两次密码是否一致
                $('#rpwd').blur(function() {
                    if($('#pwd').val() !== $('#rpwd').val()){

                        layer.tips('两次输入的密码不一致！', '#rpwd',{
                            tipsMore: true
                        });
                        rpwd = false;
                    } else if ($('#pwd').val() == $('#rpwd').val()) {
                        rpwd = true;
                    }
                });

                // 提交
                $(document).on('click','#submit',function(){

                    if ( userName == true && iphone == true && pwd == true && rpwd == true ) {
                        // 触发form提交
                        $("#formSubmit").submit();

                    } else {
                        layer.alert('请检查输入信息');
                        // 取消提交
                        return false;
                    }
                });

            });

        </script>
    </div>
</div>
</body>
</html>